<template>
  <button class="button">
    Fancy Button
    <div class="button_horizontal"></div>
    <div class="button_vertical"></div></button
  ><br />

  <div class="btn-gradient">
    <div class="gradient-border" id="box">
      Animated <br />CSS<br />Gradient Border
    </div>
  </div>

  <div class="ring-loading">loading</div>

  <button class="button2">Hover me</button>
</template>

<style scoped lang="scss">
.button {
  --offset: 10px;
  --border-size: 2px;

  display: block;
  position: relative;
  padding: 1.5em 3em;
  appearance: none;
  border: 0;
  background: transparent;
  color: #e55743;
  outline: none;
  cursor: pointer;
  font-weight: bold;
  box-shadow: inset 0 0 0 var(--border-size) currentColor;
  transition: background 0.8 ease;

  &:hover {
    background: rgba(0, 0, 0, 0.03);
  }

  &_horizontal,
  &_vertical {
    position: absolute;
    top: var(--horizontal-offset, 0);
    right: var(--vertical-offset, 0);
    bottom: var(--horizontal-offset, 0);
    left: var(--vertical-offset, 0);
    // transition 是 过渡 可以理解为一个元素在不同状态之间切换的时候定义的过渡效果。
    // transition: 过渡属性 过渡完成所需要的时间 过渡速度或者曲线 何时开始过渡;
    // ease 先缓慢在加速最后缓慢
    // linear 从开始到结束有相同的速度
    // ease-in 缓慢开始
    // ease-out 缓慢结束
    // ease-in-out 开始和结束较慢
    // cubic-beizer(n,n,n,n) 三次贝塞尔函数中定义自己的值
    transition: transform 0.8s ease;
    // will-change 性能优化的手段，告诉浏览器元素变化的方法；
    will-change: transform;

    &::before {
      content: "";
      position: absolute;
      border: inherit;
    }
  }

  &_horizontal {
    --vertical-offset: calc(var(--offset) * -1);

    border-top: var(--border-size) solid currentColor;
    border-bottom: var(--border-size) solid currentColor;

    &::before {
      top: calc(var(--vertical-offset) - var(--border-size));
      bottom: calc(var(--vertical-offset) - var(--border-size));
      right: calc(var(--vertical-offset) * -1);
      left: calc(var(--vertical-offset) * -1);
    }
  }

  &:hover &_horizontal {
    // transform允许旋转(rotate)，缩放（scale），倾斜(skew)或者平移(translate)给定元素。
    transform: scaleX(0);
  }

  &_vertical {
    --horizontal-offset: calc(var(--offset) * -1);

    border-left: var(--border-size) solid currentColor;
    border-right: var(--border-size) solid currentColor;

    &::before {
      top: calc(var(--horizontal-offset) * -1);
      bottom: calc(var(--horizontal-offset) * -1);
      left: calc(var(--horizontal-offset) - var(--border-size));
      right: calc(var(--horizontal-offset) - var(--border-size));
    }
  }

  &:hover &_vertical {
    // transform允许旋转，缩放，倾斜或者平移给定元素。
    transform: scaleY(0);
  }
}

.btn-gradient {
  #box {
    width: 400px;
    height: 200px;
    color: #fff;
    font-size: 2.5rem;
  }

  .gradient-border {
    --borderWidth: 3px;
    background: #1d1f20;
    position: relative;
    border-radius: var(--borderWidth);
  }

  .gradient-border::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(
      60deg,
      #f79533,
      #f37055,
      #ef4e7b,
      #a166ab,
      #5073b8,
      #1098ad,
      #07b39b,
      #6fba82
    );
    border-radius: calc(2 * var(--borderWidth));
    z-index: -1;
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
  }

  @keyframes animatedgradient {
    0% {
      background-position: 0% 5%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
}

.ring-loading {
  --s: 50vmin;
  --clr: #ffe681;
  --shd1: color-mix(in lab, var(--clr), #fff5);
  --b1: 140% 145% 141% 166%;
  --b2: 147% 200% 178% 150%;
  border-radius: var(--b1);
  border: 1px solid var(--clr);

  position: fixed;
  pointer-events: none;
  z-index: -100;
  width: var(--s);
  height: var(--s);
  top: calc(50% - var(--s) / 2);
  left: calc(50% - var(--s) / 2);

  filter: drop-shadow(0 0 1vmin var(--shd1))
    drop-shadow(0.1em 0.1em 0.05em var(--shd1))
    drop-shadow(-0.1em -0.1em 0.05em var(--shd1));

  box-sizing: border-box;
  rotate: -55deg;
  animation: brd1 1s infinite linear alternate, rot 30s infinite linear forwards;
  &:before,
  &:after {
    content: "";
    box-sizing: border-box;
    position: absolute;
    inset: 0;
    border: inherit;
  }
  &:before {
    --b2: 185% 158% 160% 150%;
    --b1: 147% 200% 178% 150%;
    border-radius: var(--b1);

    rotate: 55deg;
    animation: brd1 1.5s infinite linear alternate,
      rot 30s infinite linear forwards reverse;

    content: attr(data-text);
    display: grid;
    place-content: center;
    align-content: center;
    font-family: system-ui, sans-serif;
    font-size: calc(var(--s) / 10);
    text-shadow: 1px 1px 0.5em #000;
  }
  &:after {
    --b1: 185% 158% 160% 150%;
    --b2: 140% 145% 141% 166%;
    border-radius: var(--b1);

    rotate: 35deg;
    animation: brd1 2s infinite linear alternate,
      rot 40s infinite linear forwards reverse;
  }

  @keyframes brd1 {
    to {
      border-radius: var(--b2);
    }
  }

  @keyframes rot {
    to {
      transform: rotatez(360deg);
    }
  }
}

.button2 {
  display: inline-block;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  z-index: 1;
  color: #090909;
  padding: 0.7em 1.7em;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0.5em;
  background: #e8e8e8;
  border: 1px solid #e8e8e8;
  box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;

  &:active {
    color: #666;
    box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
  }

  &::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(1) scaleX(1.25);
    top: 100%;
    width: 140%;
    height: 180%;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }

  &::after {
    content: "";
    position: absolute;
    left: 55%;
    transform: translateX(-50%) scaleY(1) scaleX(1.45);
    top: 180%;
    width: 160%;
    height: 190%;
    background-color: #009087;
    border-radius: 50%;
    display: block;
    transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
    z-index: -1;
  }

  &:hover {
    color: #ffffff;
    border: 1px solid #009087;
  }
  &:hover::before {
    top: -35%;
    background-color: #009087;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }

  &:hover::after {
    top: -45%;
    background-color: #009087;
    transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
  }
}
</style>
